<template>
	<u-tabbar ref="uabbar" :value="value6" @change="change" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true" activeColor="#56BFA1" @getTabHeight="getTabHeight">
		<u-tabbar-item text="首页">
			<image class="u-page__item__slot-icon" slot="active-icon" :src="imgUrl + 'icon-1.png'"></image>
			<image class="u-page__item__slot-icon" slot="inactive-icon" :src="imgUrl + 'icon-1-s.png'"></image>
		</u-tabbar-item>
		<u-tabbar-item text="分类">
			<image class="u-page__item__slot-icon" slot="active-icon" :src="imgUrl + 'icon-3.png'"></image>
			<image class="u-page__item__slot-icon" slot="inactive-icon" :src="imgUrl + 'icon-3-s.png'"></image>
		</u-tabbar-item>
		<u-tabbar-item text="购物车">
			<image class="u-page__item__slot-icon" slot="active-icon" :src="imgUrl + 'icon-4.png'"></image>
			<image class="u-page__item__slot-icon" slot="inactive-icon" :src="imgUrl + 'icon-4-s.png'"></image>
		</u-tabbar-item>
		<u-tabbar-item text="我的">
			<image class="u-page__item__slot-icon" slot="active-icon" :src="imgUrl + 'icon-5.png'"></image>
			<image class="u-page__item__slot-icon" slot="inactive-icon" :src="imgUrl + 'icon-5-s.png'"></image>
		</u-tabbar-item>
	</u-tabbar>
</template>

<script>
export default {
	props: {
		index: {
			type: Number,
			default: 0
		}
	},
	watch: {
		index: {
			handler(newVal) {
				this.value6 = newVal;
			},
			immediate: true
		}
	},
	name: 'tabbar',
	data() {
		return {
			value6: this.index
		};
	},
	mounted() {
		// 微信小程序 获取 uabbar 的高度
		// app 获取 uabbar 的高度
		// this.$refs.uabbar.$el.getBoundingClientRect().height;
		// #ifdef MP-WEIXIN
		// const height1 = this.$refs.uabbar.getPlaceholderHeight();
		// #endif
		// #ifdef APP-PLUS
		// const height2 = this.$refs.uabbar.$el.getBoundingClientRect().height;
		// #endif
		// console.log('getBoundingClientRect', height1);
		// console.log('getBoundingClientRect', this.$refs.uabbar);
	},
	methods: {
		change(index) {
			this.value6 = index;
			this.$emit('changePage', {
				index
			});
		},
		getTabHeight(e) {
			uni.setStorageSync('tabHeight', e);
		}
	}
};
</script>

<style lang="scss">
.u-page__item__slot-icon {
	width: 116rpx;
	height: 64rpx;
	margin-bottom: 8rpx;
	font-family: 'PingFang SC-Regular';
}
</style>
